<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>固定定位</title>

    <script src="../../js/jquery-latest.js"></script>
</head>
<body style="height: 2000px;">

<h1>固定定位</h1>

<div class="container">
    <span style="margin-left: 20px">marin1</span>
    <span style="margin-left: 20px">marin2</span>
</div>

<div>
    <span style="float: left;margin-left: 20px;width: 80px;height: 40px;margin-right: -100px;">浮动元素</span>
    <span style="float: left;margin-left: 40px;background-color: aliceblue;">浮动元素</span>
    <span style="float: left;margin-left: -20px;">浮动元素</span>

    绝对偏移---------------------------绝对偏移<span style="position: absolute">绝对偏移</span>
    固定偏移---------------------------固定偏移<span style="position: fixed">固定偏移</span>


    相对偏移---------------------------相对偏移<span style="position: relative;margin-left: 20px;margin-top: 20px;">
    <span style="position: absolute;top:20px;width: 100px;">相对偏移子元素</span>
    相对偏移</span>

    静态内联元素---------------------------静态内联元素<p style="position: static;line-height:50px;width: 500px;text-align: justify">静态内联元素</p>
</div>


<div style="width: 80%;margin: auto;margin-top: 20px;">
    <div style="width: 35%;margin-left: 10%;display: inline-block;text-align: center;position: static">
        1
    </div>
    <div style="width: 35%;margin-left: 10%;display: inline-block;text-align: center;position: static">
        2
    </div>
</div>


<h2>offset</h2>
<div style="width: 80%;margin: auto">
    <div style="float: left;margin-right: -10px">right retract</div>
    <p style="float: left;background-color: red">float</p>

    <div style="float: right;margin-left: -100px">right retract</div>
    <p style="float: right;background-color: red">float</p>
</div>

<h2>offset absolute and fixed</h2>
<div style="position: relative">
    <p>This is absolute text test:</p>
    <span style="position: absolute;margin-left: 4px;background-color: red">Offset absolute</span>
    <p>This is fixed text test:</p>
    <span style="position: fixed;margin-left: 4px;background-color: red">Offset fixed</span>
</div>

<h2>offset relative</h2>
<div>
    <p>This inline content is relatively offset,it retains its
        <span style="position: relative;left: 0px; top: -10px;"> rendered shape</span>
    </p>
    <p style="left: -200px;width: 40px">ttt</p>
    <p style="left: 200px;right: 200px;margin-left: 300px;margin-right: 300px;">tt2t</p>
    <p style="left: 20px;top :-40px;width: 40px">ttt3</p>
</div>

<h2>align inline</h2>
<div>
    <p style="text-align: justify">sadfadf asdfasdf sadfasdfsa asdfasdf sadfadf asdfasdf sadfasdfsa asdfasdf sadfadf asdfasdf sadfasdfsa asdfasdf sadfadf asdfasdf sadfasdfsa asdfasdf sadfadf asdfasdf sadfasdfsa asdfasdf sadfadf asdfasdf sadfasdfsa asdfasdf sadfadf asdfasdf sadfasdfsa asdfasdf sadfadf asdfasdf sadfasdfsa asdfasdf sadfadf asdfasdf sadfasdfsa asdfasdf sadfadf asdfasdf sadfasdfsa asdfasdf sadfadf asdfasdf sadfasdfsa asdfasdf sadfadf asdfasdf sadfasdfsa asdfasdf sadfadf asdfasdf sadfasdfsa asdfasdf </p>
</div>

<style type="text/css">
    div,p,*.container{
        border: 2px solid aquamarine;
    }

    span{
        border: 2px solid red;
        background-color: chartreuse;
    }
</style>


</body>
</html>